<!-- 运费模板添加&修改 -->
<template>
  <el-dialog
    :title="title"
    :visible="showDialog"
    class="box"
    :close-on-click-modal="false"
    @close="closeDialog"
    @open="opens"
  >
    <el-form
      ref="form"
      label-width="130px"
      :model="form"
      :rules="rules"
    >
      <el-form-item
        label="模板类型"
        prop="templateType"
      >
        <el-select
          v-model="form.templateType"
          style="width:90%"
          placeholder="请选择模板类型"
          @change="isShow"
        >
          <el-option
            v-for="item in templateType"
            :key="item.id"
            :label="item.value"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        label="运送类型"
        prop="transportType"
      >
        <el-select
          v-model="form.transportType"
          style="width:90%"
          placeholder="请选择运送类型"
        >
          <el-option
            v-for="item in transportType"
            :key="item.id"
            :label="item.value"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        v-if="associateds"
        label="关联城市"
      >
        <span>全国</span>
      </el-form-item>
      <el-form-item
        v-else
        label="关联城市"
        prop="associatedCityList"
      >
        <div>
          <el-checkbox-group
            v-model="form.associatedCityList"
          >
            <el-checkbox
              v-for="e in associatedCity"
              :key="e.id"
              :label="e.id"
            >{{ e.value }}</el-checkbox>

          </el-checkbox-group>
        </div>
      </el-form-item>
      <el-form-item
        label="首重价格"
        prop="firstWeight"
      >
        <el-input
          v-model="form.firstWeight"
          style="width:90%"
          placeholder="请输入首重价格"
        >
          <span
            slot="suffix"
            style="
                    color: #20232a;
                    font-weight: 400;
                    font-size: 14px;
                    font-family: PingFangSC, PingFangSC-Regular;
                    margin-right: 14px;
                  "
          >元</span>
        </el-input>
      </el-form-item>
      <el-form-item
        label="续重价格"
        prop="continuousWeight"
      >
        <el-input
          v-model="form.continuousWeight"
          style="width:90%"
          placeholder="请输入续重价格"
        >
          <span
            slot="suffix"
            style="
                    color: #20232a;
                    font-weight: 400;
                    font-size: 14px;
                    font-family: PingFangSC, PingFangSC-Regular;
                    margin-right: 14px;
                  "
          >元</span>
        </el-input>
      </el-form-item>
      <el-form-item
        label="轻抛系数"
        prop="lightThrowingCoefficient"
      >
        <el-input
          v-model="form.lightThrowingCoefficient"
          style="width:90%"
          placeholder="请输入轻抛系数"
        ></el-input>
      </el-form-item>
    </el-form>
    <span
      slot="footer"
      class="dialog-footer"
      ccenter="true"
    >
      <el-button @click="closeDialog">取 消</el-button>
      <el-button
        type="primary"
        @click="addFreightManageOperate"
      >确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import EnumObj from '@/api/freightManage'
import { freightManageOperate } from '@/api/transit'
// const cityOptions = ['1', '2', '3']

export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      txts: '全国',
      form: {
        // 模板类型
        templateType: '',
        // 运送类型
        transportType: '',
        // 关联城市
        associatedCityList: [],
        // 首重价格
        firstWeight: '',
        // 续重价格
        continuousWeight: '',
        // 轻抛系数
        lightThrowingCoefficient: ''
      },
      rules: {
        // 模板类型
        templateType: [
          { required: true, message: '模板类型不能为空', trigger: 'blur' }
        ],
        // 运送类型
        transportType: [
          { required: true, message: '运送类型不能为空', trigger: 'blur' }
        ],
        // 关联城市
        associatedCityList: [
          { required: true, message: '关联城市不能为空', trigger: 'blur' }
        ],
        // 首重价格
        firstWeight: [
          { required: true, message: '首重价格不能为空', trigger: 'blur' },
          { pattern: /^-?\d{1,3}(,\d{3})*(\.\d{1,2})?$/, message: '只能输入数字类型，请重新输入', trigger: 'blur' }
        ],
        // 续重价格
        continuousWeight: [
          { required: true, message: '续重价格不能为空', trigger: 'blur' },
          { pattern: /^-?\d{1,3}(,\d{3})*(\.\d{1,2})?$/, message: '只能输入数字类型，请重新输入', trigger: 'blur' }
        ],
        // 轻抛系数
        lightThrowingCoefficient: [
          { required: true, message: '轻抛系数不能为空', trigger: 'blur' },
          { pattern: /^-?\d{1,3}(,\d{3})*(\.\d{1,2})?$/, message: '只能输入数字类型，请重新输入', trigger: 'blur' }
        ]
      },
      templateType: EnumObj.templateType,
      transportType: EnumObj.transportType,
      associatedCity: EnumObj.associatedCity,
      // 全国显示隐藏
      associateds: true
    }
  },
  methods: {
    opens() {

    },
    /**
     * 添加
     */
    addFreightManageOperate() {
      // 兜底校验
      this.$refs.form.validate(async (flag) => {
        if (!flag) return
        if (this.associateds) {
          this.form.associatedCityList = []
        }
        if (this.form.associatedCityList.length === 0) {
          this.form.associatedCityList = ['1']
        } else if (this.form.associatedCityList.length === 1) {
          if (this.form.associatedCityList[0] === '1') {
            this.form.associatedCityList.splice(0, 1)
          }
        } else {
          if (this.form.associatedCityList[0] === '1') {
            this.form.associatedCityList.splice(0, 1)
          }
        }
        // 调用接口
        const res = await freightManageOperate(this.form)
        if (res.code === 200) {
          if (this.title === '编辑模板') {
            this.$message.success('编辑成功')
          }
          if (this.title === '添加列表') {
            this.$message.success('添加成功')
          }
          // 添加成功提示
          // this.$message.success('添加成功')
          // 调用父组件的方法重新渲染列表
          this.$parent.freightManage()
          // 关闭弹窗
          this.closeDialog()
        } else {
          this.$message.error(res.msg)
          return
        }
      })
    },
    /**
     * 多选框全国显示或隐藏
     */
    isShow(val) {
      if (val === 3) {
        this.associateds = false
      } else {
        this.associateds = true
      }
    },
    /**
     * 关闭弹窗
     */
    closeDialog() {
      // 通知父组件关闭弹窗
      this.$emit('update:showDialog', false)
      // 清空校验表单内容
      this.$refs.form.resetFields()
      this.form = {
        // 模板类型
        templateType: '',
        // 运送类型
        transportType: '',
        // 关联城市
        associatedCityList: [],
        // 首重价格
        firstWeight: '',
        // 续重价格
        continuousWeight: '',
        // 轻抛系数
        lightThrowingCoefficient: ''
      }
      this.associateds = true
    }
  }
}
</script>
<style scoped lang="scss">
  .box{
    width: 1200px;
    margin: 100px auto;
    margin-bottom: 20px;
    .el-form-item__label{
      font-size: 400;
    }
    .dialog-footer{
      // margin: 0 auto;
      margin-right: 40%;
    }
  }
/deep/ .el-input.is-disabled .el-input__inner {
    background-color: transparent;
    border: none;
    color: #000;
    cursor: text!important;
}

</style>
